<template>
  <div>
    <HeaderTop :enable-shadow="true"/>

    <!--内容（上） content_top 开始-->
    <el-row class="">
      <el-col :span="24">
        <CarouselComponent/>
      </el-col>
    </el-row>
    <!--内容（上） content_top 结束-->

    <el-row>
      <!--最新约拍-->
      <el-row class="al-bg-color-white al-hover-shadow">
        <el-col :span="2">
          <pre> </pre>
        </el-col>
        <el-col :span="20">
          <!--最新约拍-->
          <div>
            <TitleNode
                    class="al-m-20px"
                    title-text="最新约拍"
                    title-text2="开启您的约拍之旅吧~"
                    position="center"/>

            <NewestAppointmentComponent/>

            <!-- 查看更多 -->
            <el-divider content-position="right">
              <el-button class="al-cursor-pointer"
                         plain
                         round
                         size="mini"
                         @click="goPage('appointment/all')">更多
              </el-button>
            </el-divider>
          </div>

        </el-col>
        <el-col :span="2">
          <pre> </pre>
        </el-col>
      </el-row>

      <!--约拍类型-->
      <el-row class="al-p-bottom-30px">
        <el-col :span="2">
          <pre> </pre>
        </el-col>
        <el-col :span="20">
          <div>
            <TitleNode position="center"
                       title-text="约拍类型"
                       title-text2="您是不是想找这些约拍呢？"/>
          </div>

          <div>
            <AppointmentType mode="list-h"/>

          </div>
        </el-col>
        <el-col :span="2">
          <pre> </pre>
        </el-col>
      </el-row>

      <!--打卡点推荐-->
      <el-row class="al-bg-color-white al-hover-shadow">
        <el-col :span="2">
          <pre> </pre>
        </el-col>
        <el-col :span="20">

          <!--打卡点推荐-->
          <div class="">
            <TitleNode
                    class="al-m-20px"
                    title-text="打卡点"
                    title-text2="不知道去哪里拍照？试试这些打卡点吧！"
                    position="center"/>

            <SpotComponent :enable-city="true"
                           :enable-pagination="false"
                           mode="list-h"
                           :item-count="6"/>
          </div>

        </el-col>
        <el-col :span="2">
          <pre> </pre>
        </el-col>
      </el-row>

      <!-- 模特/摄影师推荐 -->
      <el-row class="al-box-container">
        <el-col :span="2">
          <pre> </pre>
        </el-col>
        <el-col :span="20">

          <!-- 模特推荐 -->
          <div class="">
            <TitleNode
                    class="al-m-20px"
                    title-text="摄影师 / 模特"
                    title-text2="找不到摄影师/模特？了解下Ta们吧~"
                    position="center"/>
            <UserRecommendComponent :user-identity="2"/>
          </div>


          <!-- 摄影师推荐 -->
          <div class="">
            <UserRecommendComponent :user-identity="1"/>
          </div>


        </el-col>
        <el-col :span="2">
          <pre> </pre>
        </el-col>
      </el-row>

      <!-- 作品展示 -->
      <el-row class="al-bg-color-white works-bg-hover">
        <el-col :span="2">
          <pre> </pre>
        </el-col>
        <el-col :span="20">

          <!-- 作品展示 -->
          <div>
            <TitleNode
                    class="al-m-20px"
                    title-text="作品"
                    title-text2="欣赏下Ta们的作品吧"
                    position="center"/>

            <!--显示作品-->
            <WorksIndexComponent/>

            <!-- 查看更多 -->
            <div class="">
              <br>
              <br>
              <el-divider>
                <el-button round plain @click="goPage('works/all')">查看更多</el-button>
              </el-divider>
              <br>
            </div>

          </div>

        </el-col>
        <el-col :span="2">
          <pre> </pre>
        </el-col>
      </el-row>
    </el-row>


    <!-- foot 开始-->

    <a-l-footer></a-l-footer>
    <!--foot 结束-->
  </div>
</template>

<script>
  import {request} from "@/util/network/request";
  import HeaderTop from "@/components/public/HeaderTop";
  import TitleNode from "@/components/public/TitleNode";
  import ALImage from "@/components/public/ALImage";
  import AvatarNickname from "@/components/public/AvatarNickname";
  import DisplayGridImage from "@/components/public/DisplayGridImage";

  import {CAROUSEL_GET_ALL} from "@/util/network/api/carousel/api-carousel";
  import {USER_GET_ALL_COMMON} from "@/util/network/api/user/api-user";
  import {APPOINTMENT_GET_NEWEST} from "@/util/network/api/appointment/api-appointment";
  import {WORKS_GET_ALL_USER_PAGINATION} from "@/util/network/api/works/api-works";
  import ALFooter from "@/components/public/ALFooter";
  import SpotComponent from "../spot/component/SpotComponent";
  import CarouselComponent from "./component/CarouselComponent";
  import NewestAppointmentComponent from "./component/NewestAppointmentComponent";
  import UserRecommendComponent from "./component/UserRecommendComponent";
  import WorksIndexComponent from "./component/WorksIndexComponent";
  import AppointmentType from "../appointment/component/AppointmentType";


  export default {
    components: {
      AppointmentType,
      WorksIndexComponent,
      UserRecommendComponent,
      NewestAppointmentComponent,
      CarouselComponent,
      SpotComponent,
      ALFooter,
      TitleNode,
      HeaderTop
    },
    data() {
      return {}
    },

    mounted() {

    },

    methods: {
      goPage: function (path) {
        this.gotoPage(path);
      },

    }

  }
</script>

<style scoped>

  .works-bg-hover:hover {
    box-shadow: 3px 3px 8px #DBDBDB;
  }
</style>
